﻿@namespace MudBlazor.Docs.Examples
@inject ISnackbar Snackbar
<style>
    .drag-drop-zone {
        display: flex;align-items: center;justify-content: center;transition: all .4s;min-height: 400px;
    }
    .drag-drop-input {
        position: absolute;width: 100%;height: 90%;opacity: 0;cursor:pointer;
        z-index:2;
    }
    .drag-enter {
        box-shadow: var(--mud-elevation-10);
    }
    .list{
        padding:2em;min-width:100%;
    }
</style>

<MudPaper @ondragenter="@(()=>_dragEnterStyle="drag-enter")"
          @ondragleave="@(()=>_dragEnterStyle=null)"
          @ondragend="@(()=>_dragEnterStyle=null)"
          Class=@("drag-drop-zone "+ _dragEnterStyle)>

    <InputFile OnChange="OnInputFileChanged" multiple  class="drag-drop-input" />

    @if (fileNames.Count() == 0)
    {
        <MudText Typo="Typo.h3">Drag and drop files here or click</MudText> 
    }else
    {
        <MudList Style="padding:2em;width:100%;" Dense="true" >
            @foreach (var file in fileNames)
            {
                <MudListItem @key="@file" >
                   <MudChip Color="Color.Dark" 
                            Style="width:60px; overflow:hidden;" 
                            Text="@(file.Split(".").Last())" />
                   @file
                </MudListItem>}
        </MudList>
    }
</MudPaper>

<MudGrid Justify="Justify.Center" Spacing="4">
    <MudItem>
        <MudButton OnClick="Upload" Disabled="@(!fileNames.Any())" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton>
    </MudItem>
    <MudItem>
        <MudButton OnClick="@fileNames.Clear" Disabled="@(!fileNames.Any())" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton>
    </MudItem>
</MudGrid>


@code { 
    string _dragEnterStyle;
    IList<string> fileNames = new List<string>();
    void OnInputFileChanged(InputFileChangeEventArgs e)
    {
        var files = e.GetMultipleFiles();
        fileNames = files.Select(f => f.Name).ToList();
    }
    void Upload()
    {
        //Upload the files here
        Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
        Snackbar.Add("TODO: Upload your files!", Severity.Normal);
    }
}